.body {
  background-color: #fffef6;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500px;
  width: 700px;
}

.plane-wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  background-image: url('data:image/svg+xml,<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M193.06 115.401C181.82 125.338 175.796 139.901 176.696 154.898C177.472 167.226 167.257 177.441 154.898 176.696C139.932 175.765 125.338 181.82 115.401 193.06C107.204 202.313 92.7651 202.313 84.5987 193.06C74.6623 181.82 60.0994 175.796 45.1017 176.696C32.7744 177.472 22.5586 167.257 23.3038 154.898C24.2354 139.932 18.1804 125.338 6.93992 115.401C-2.3133 107.204 -2.3133 92.7651 6.93992 84.5987C18.1804 74.6623 24.2043 60.0994 23.3038 45.1017C22.5276 32.7744 32.7434 22.5586 45.1017 23.3038C60.0683 24.2354 74.6623 18.1804 84.5987 6.93992C92.7961 -2.31331 107.235 -2.31331 115.401 6.93992C125.338 18.1804 139.901 24.2043 154.898 23.3038C167.226 22.5276 177.441 32.7434 176.696 45.1017C175.765 60.0683 181.82 74.6623 193.06 84.5987C202.313 92.7962 202.313 107.235 193.06 115.401Z" fill="%23F4CA55"/></svg>');
}

.paper-plane {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  margin-top: -10px;
  transform: translate(0, 0);
}

.trail {
  width: 20px;
  height: 8px;
  border-radius: 20px;
  position: absolute;
  background-color: #fffef6;
  transform: rotate(-45deg) translate(-60px, 20px);
}

.paper-plane::before {
  content: "";
  width: 35px;
  height: 8px;
  border-radius: 20px;
  background-color: #fffef6;
  position: absolute;
  transform: rotate(-45deg) translate(-35px, 40px);
}

.paper-plane::after {
  content: "";
  width: 30px;
  height: 8px;
  border-radius: 20px;
  background-color: #fffef6;
  position: absolute;
  transform: rotate(-45deg) translate(-55px, -5px);
}
.number {
  font-size: xx-large;
  font-weight: 700;
  font-style: italic;
  margin-top: 12px;
  letter-spacing: 3px;
}

.paper-plane {
  animation: plane 3s 0s ease-in-out infinite;
  &:hover {
    animation: go 1.75s 0s ease-in-out infinite;
  }
}

.trail {
  animation: trail 3s 0s ease-in-out infinite;
}

.paper-plane::before {
  animation: trail 3s 0s ease-in-out infinite;
}

.paper-plane::after {
  animation: trail 3s 0s ease-in-out infinite;
}

@keyframes plane {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-10px, 15px);
  }
  50% {
    transform: translate(5px, -15px);
  }
  75% {
    transform: translate(10px, -15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes trail {
  0% {
    opacity: 0.8;
    scale: 1;
  }
  50% {
    opacity: 0.2;
    scale: 1.1;
  }
  100% {
    opacity: 0.8;
    scale: 1;
  }
}

@keyframes go {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5%, 10%);
  }
  60% {
    opacity: 1;
    transform: translate(50%, -100%);
  }
  75% {
    opacity: 0;
    transform: translate(-100%, -100%);
  }
  80% {
    opacity: 0;
    transform: translate(-25%, 50%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
